<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
      <div style="width: 38%; float: right;">
        <form:form commandName="newUserStory">
	      <table style="border: 1px solid Black; padding: 1em;">
		    <tr>
			  <td colspan="2">Story :</td>
		    </tr>
		    <tr>
			  <td colspan="2"><form:textarea path="story" cols="35" /></td>
			</tr>
			<tr>
			  <td>Priority :</td>
			  <td>Estimate :</td>
			</tr>
			<tr>
			  <td style="vertical-align: top;"><form:select path="priority">
				<form:options items="${priorities}" />
			</form:select></td>
			  <td style="vertical-align: top;"><form:select path="estimate">
				<form:options items="${estimates}" />
			</form:select></td>
		    </tr>
		    <tr>
			  <td colspan="2" style="text-align: right;"><input type="submit"
				  value="Create Story" /></td>
		    </tr>
	      </table>
        </form:form>
      </div>
        <ol id="productBacklog">
          <c:if test="${not empty backlog}">
          <c:forEach items="${backlog}" var="userStory">
          <li id="userStory_${userStory.id}" class="userStory" style="min-height: ${userStory.estimate.storyPoints}em;">
            <c:out value="${userStory.story}"/>
          </li>
          </c:forEach>
          </c:if>
        </ol>
      <script type="text/javascript">
      Sortable.create('productBacklog', {
			scroll :'productBacklog',
			ghosting: true
		});
      </script>